import 'package:edu/pages/main_tab/edu/edu_course/edu_course_tab/video_play/edu_course_video_play_widget_logic.dart';
import 'package:edu/utils/app_theme.dart';
import 'package:flutter/material.dart';
import 'package:media_kit_video/media_kit_video.dart';
import 'package:provider/provider.dart';

class EduCourseVideoPlayWidget extends StatefulWidget {
  const EduCourseVideoPlayWidget({super.key});

  @override
  State<EduCourseVideoPlayWidget> createState() =>
      _EduCourseVideoPlayWidgetState();
}

class _EduCourseVideoPlayWidgetState extends State<EduCourseVideoPlayWidget> {
  @override
  void initState() {
    super.initState();
    context.read<EduCourseVideoPlayWidgetLogic>().init();
  }

  @override
  Widget build(BuildContext context) {
    final logic = context.read<EduCourseVideoPlayWidgetLogic>();
    return Center(
      child: Video(
        controller: logic.controller,
        controls: (state) {
          return _buildVideoControlBar(state);
        },
      ),
    );
  }

  Widget _buildVideoControlBar(VideoState state) {
    return Selector<EduCourseVideoPlayWidgetLogic, bool>(
      selector: (context, logic) => logic.isDataRead,
      builder: (context, v, child) {
        if (!v) {
          return const SizedBox.shrink();
        } else {
          final logic = context.read<EduCourseVideoPlayWidgetLogic>();
          final player = logic.player;
          return Column(
            children: [
              const Spacer(),
              Container(
                height: 44,
                width: double.infinity,
                color: Colors.white24,
                child: Row(
                  children: [
                    const MaterialPlayOrPauseButton(iconSize: 24),
                    ValueListenableBuilder(
                      valueListenable: logic.positionProgress,
                      builder: (context, pos, child) {
                        return Expanded(
                          child: SliderTheme(
                            data: SliderTheme.of(context).copyWith(
                              trackHeight: 3,
                              thumbShape: const RoundSliderThumbShape(
                                enabledThumbRadius: 8,
                              ),
                              overlayShape: const RoundSliderOverlayShape(
                                overlayRadius: 10,
                              ),
                              thumbColor: Colors.white,
                              activeTrackColor: Colors.white,
                              inactiveTrackColor: AppTheme.shared.greyColor
                                  .withAlpha(128),
                              secondaryActiveTrackColor: Colors.green,
                            ),
                            child: ValueListenableBuilder(
                              valueListenable: logic.bufferPostionProgress,
                              builder: (context, buf, child) {
                                return Slider(
                                  value: pos.inMilliseconds.toDouble(),
                                  secondaryTrackValue: buf.inMilliseconds
                                      .toDouble(),
                                  min: 0,
                                  max: player.state.duration.inMilliseconds
                                      .toDouble(),
                                  onChangeStart: logic.videoPostionChangeStart,
                                  onChanged: logic.videoPostionChange,
                                  onChangeEnd: logic.videoPostionChangeEnd,
                                );
                              },
                            ),
                          ),
                        );
                      },
                    ),
                    const SizedBox(width: 5),
                    // 播放进度
                    const MaterialDesktopPositionIndicator(
                      style: TextStyle(
                        fontFamily: 'Courier',
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                        color: Colors.white,
                      ),
                    ),
                    const MaterialDesktopVolumeButton(),
                  ],
                ),
              ),
            ],
          );
        }
      },
    );
  }
}
